<template>
	<div class="lyric">
		<div class="title">
			<p>
				<span>逃</span>
				<span>-</span>
				<span class="active">姜潮</span>
			</p>
		</div>
		<div class="list">
			<div>
				<p class="m-song-lritem j-lritem" style="">
					作曲 : 曲世聪
				</p>
				<p class="m-song-lritem j-lritem active" style="">
					作词 : 陈震
				</p>
				<p class="m-song-lritem j-lritem" style="">
					编曲:文一丁
				</p>
				<p class="m-song-lritem j-lritem" style="">
					呜…呜…
				</p>
				<p class="m-song-lritem j-lritem" style="">
					欢呼喝彩尖叫 崇拜的人潮
				</p>
				<p class="m-song-lritem j-lritem" style="">
					掩饰不了孤独的味道
				</p>
				<p class="m-song-lritem j-lritem" style="">
					欢呼喝彩尖叫 崇拜的人潮
				</p>
				<p class="m-song-lritem j-lritem" style="">
					掩饰不了孤独的味道
				</p>
				<p class="m-song-lritem j-lritem" style="">
					欢呼喝彩尖叫 崇拜的人潮
				</p>
				<p class="m-song-lritem j-lritem" style="">
					掩饰不了孤独的味道
				</p>
			</div>
		</div>
		<div class="all">
			<p class="active">查看完整歌词》</p>
		</div>
		<div class="to">
			<i></i>
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped="scoped">
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.clear {
		clear: both;
	}
	p{
		text-align: center;
		color: white;
		font-size: r(28px)
	}
	.active{
		opacity: 0.5;
	}
	.lyric{
		.title{
			margin-top: r(50px);
		}
		.list{
			margin-top: r(20px);
			line-height: r(50px);
			height: r(100px);
			overflow: hidden;
			div{
				transform: translateY(0px);
			}
		}
		.all{
			margin-top: r(130px);
		}
		.to{
			height: r(50px);
			margin-top: r(30px);
			i{
				display: block;
				margin: 0 auto;
				width: r(34px);
    			height: r(24px);
				background-size:100% ;
				background-image: url();
			    background-repeat: no-repeat;
			}
		}
	}
</style>